<template>
  <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-form-item label="栋舍名称">
      <el-input v-model="form.bedroomName" placeholder="请输入栋舍名称" clearable/>
    </el-form-item>
    <el-form-item label="负责人">
      <el-input v-model="form.personName" placeholder="请输入负责人" clearable/>
    </el-form-item>
    <el-form-item label="栋舍类型">
      <el-select v-model="form.bedroomTypeId" placeholder="请选择" style="width: 200px" clearable>
        <el-option v-for="item in idCardsList" :label="item.bedroomTypeName" :value="item.bedroomTypeId" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="danger" @click="getData()"> 查询 </el-button>
    </el-form-item>
  </el-form>

  <el-row>
    <el-col :span="6">
      <el-button type="danger" :icon="Plus" @click="dialogFormVisible = true">新增</el-button>
      <el-button type="danger" :icon="Delete" :disabled="true">删除</el-button>
    </el-col>
  </el-row>

  <el-table :data="tableData" style="width: 100%">
    <!-- <el-table-column type="selection" width="55" /> -->
    <el-table-column prop="bedroomId" label="序号" align="center" />
    <el-table-column prop="bedroomTypeName" label="栋舍类型" align="center" />
    <el-table-column prop="bedroomName" label="栋舍名称" align="center" />
    <el-table-column prop="personName" label="负责人" align="center" />
    <el-table-column prop="produceName" label="生产人员" align="center" />

    <el-table-column prop="state" label="状态" align="center">
      <template #default="scope">
        <el-tag v-if="scope.row.state === 1" type="primary">启用</el-tag>
        <el-tag v-if="scope.row.state === 2" type="success">禁用</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="" label="操作" align="center" width="180">
      <template #default="scope">
        <el-button type="primary" link>修改</el-button>
        <el-button type="primary" link>删除</el-button>
        <el-button type="primary" link @click="addField(scope.row)">栏位管理</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <div>
    <el-pagination
      v-model:current-page="form.pageIndex"
      v-model:page-size="form.pageSize"
      :page-sizes="[3, 5, 8, 10]"
      :background="true"
      layout="total, sizes, prev, pager, next, jumper"
      :total="form.totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <!-- 新增栋舍弹出框 -->
  <el-dialog v-model="dialogFormVisible" title="新增-栋舍" width="500">
    <el-form :model="form" :rules="rules" ref="ruleFormRef">
      <el-form-item label="栋舍类型" :label-width="formLabelWidth">
        <el-select v-model="form.bedroomTypeId" placeholder="请选择">
          <el-option  v-for="item in idCardsList"  :label="item.bedroomTypeName"  :value="item.bedroomTypeId"/>
        </el-select>
      </el-form-item>
      <el-form-item label="栋舍名称" prop="bedroomName" :label-width="formLabelWidth">
        <el-input v-model="form.bedroomName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="负责人" prop="personName" :label-width="formLabelWidth">
        <el-select v-model="form.personName" style="width: 200px" placeholder="请选负责人" >
          <el-option label="郑健义" value="郑健义" />
          <el-option label="黄峭" value="黄峭" />
          <el-option label="黄慧贤" value="黄慧贤" />
          <el-option label="王丙鑫" value="王丙鑫" />
        </el-select>
      </el-form-item>
      <el-form-item label="生产人员" prop="produceName" :label-width="formLabelWidth">
        <el-input v-model="form.produceName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="状态" prop="state" :label-width="formLabelWidth">
        <el-radio-group v-model="form.state">
          <el-radio :value="1">启用</el-radio>
          <el-radio :value="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="备注" prop="notes" :label-width="formLabelWidth">
        <el-input v-model="form.notes" type="textarea" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="dialogFormVisible = false">取消</el-button>
        <el-button type="danger" @click="submitForm(ruleFormRef)">保存</el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 新增栏位 -->
  <el-dialog v-model="dialogFieldVisible" title="新增栏位" width="500">
    <el-form-item label="添加方式:" :label-width="formLabelWidth">
      <el-radio-group v-model="detailField.isYes">
        <el-radio :value="1">单个新增</el-radio>
        <el-radio :value="2">批量新增</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="当前栋舍:" :label-width="formLabelWidth">
      {{ detailField.bedroomName }}
    </el-form-item>
    <!--单个新增-->
    <el-form :model="detailField" :rules="rules" ref="ruleFormRef" v-if="detailField.isYes==1">
      <el-form-item label="栏位名称" :label-width="formLabelWidth">
        <el-input v-model="detailField.fieldName" placeholder="请输入栏位名称" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <!--批量新增-->
    <el-form :model="detailField" :rules="rules" ref="ruleFormRef" v-else-if="detailField.isYes==2">
      <el-form-item label="前缀：" :label-width="formLabelWidth">
        <el-input v-model="detailField.prefix" placeholder="请输入前缀" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="开始编号" :label-width="formLabelWidth">
        <el-input v-model="detailField.startNumber" placeholder="请输入开始编号" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="栏位数量" :label-width="formLabelWidth">
        <el-input v-model="detailField.numberofFields" placeholder="请输入栏位数量" autocomplete="off"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="danger" @click="dialogFieldVisible = false">取消</el-button>
        <el-button type="danger" @click="submitField(ruleFormRef)">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import axios from "axios";
import { useRouter } from "vue-router";
import { Delete, Plus } from "@element-plus/icons-vue";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const router = useRouter();

const dialogFormVisible = ref(false);
const dialogFieldVisible = ref(false);
const formLabelWidth = "140px";

const form = reactive({
  bedroomTypeId: "",
  bedroomName: "",
  personName: "",
  produceName: "",
  state: "",
  notes: "",
  pageIndex: 1,
  pageSize: 3,
  totalCount: 0,
  pageCount: 0,
});

const detailField = reactive({
  fieldName: "",
  bedroomId: 0,
  bedroomName: "",
  isYes:1,
  prefix:'',
  startNumber:'',
  numberofFields:''
});

const tableData = ref([]);
//显示
const getData = () => {
  axios.post(apiUrl+"/api/BedRoom/ShowBedroom", {
      bedroomTypeId: form.bedroomTypeId || 0,
      bedroomName: form.bedroomName,
      personName: form.personName,
      pageIndex: form.pageIndex,
      pageSize: form.pageSize,
    })
    .then((res) => {
      console.log(res.data);
      tableData.value = res.data.data.list;
      form.pageCount = res.data.data.pageCount;
      form.totalCount = res.data.data.totalCount;
    });
};

//分页
const handleSizeChange = (val: number) => {
  form.pageSize = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  form.pageIndex = val;
  getData();
};

//栋舍类型列表
const idCardsList = ref([]);
const GetidCard = () => {
  axios.post(apiUrl+"/api/BedRoom/Handle", {}).then((res) => {
    idCardsList.value = res.data.data;
  });
};
const ruleFormRef = ref<FormInstance>();
//验证
const rules = reactive<FormRules>({
  bedroomTypeName: [{ required: true, message: "请选择栋舍", trigger: "blur" }],
  bedroomName: [{ required: true, message: "请输入栋舍名称", trigger: "blur" }],
  personName: [
    { required: true, message: "请输入负责人名称", trigger: "blur" },
  ],
});

//添加
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!");
      axios
        .post(apiUrl+"/api/BedRoom/addBedrooms", form)
        .then((res) => {
          console.log(res.data);
          if (res.data.code == 0) {
            ElMessage.success("添加成功");
            setTimeout(() => {
              dialogFormVisible.value = false;
            }, 1000);
          } else {
            ElMessage.error("添加失败");
          }
        });
    }else {
      console.log('error submit!', fields)
    }
  });
};



const addField = (row: any) => {
  console.log(row);
  detailField.bedroomId=row.bedroomId;
  detailField.bedroomName=row.bedroomName;
  dialogFieldVisible.value=true;
  //handleBedroomDetail()
};

// //获取栋舍名称
// const handleBedroomDetail = (id: number) => {
//   axios
//     .post(apiUrl+"/api/BedRoom/GetDetailBedroom", {
//       bedroomId: id,
//     })
//     .then((res) => {
//       detailField.bedroomId = res.data.data.bedroomId;
//       detailField.bedroomName = res.data.data.bedroomName;
//     });
// };

//新增栏位
const submitField = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      //单个新增时赋值
      if(detailField.isYes==1){
        detailField.startNumber=0;
        detailField.numberofFields=0;
      }
      axios
        .post(apiUrl+"/api/BedRoom/AddField", detailField)
        .then((res) => {
          if (res.data.code == 0) {
            ElMessage.success("添加成功");
            dialogFieldVisible.value = false;
            getData();
          } else {
            ElMessage.error("添加失败");
          }
        });
    }
  });
};

//生命周期钩子
onMounted(() => {
  getData();
  GetidCard();
});
</script>

<style scoped></style>
